<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息新增详细页</title>
<!-- 导入bootstrap的资源文件 -->
<link rel="stylesheet"
	href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet"
	href="${basePath }static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"></link>
<script type="text/javascript"
	src="${basePath }static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入JQuery的资源文件 -->
<script type="text/javascript"
	src="${basePath }static/JQuery1.12.4/jquery1.12.4.min.js"></script>
<!-- ajax显示数据 -->
<script type="text/javascript">
	//自动执行以下代码
	// 在浏览器加载该页面是就执行该方法
	$(document).ready(function() {//等待dom元素加载完毕,类似window.onload;
		// 浏览器加载完成以后会执行以下代码
		//console.info("here");
		ajaxShowData();
	});

	/**
	   使用ajax查询数据并进行显示操作
	 */
	function ajaxShowData() {
		// 使用jquery的ajax函数获取服务器的数据，并进行回调显示
		$.ajax({
			type : "POST", // 等价于form的method属性
			url : "${basePath}UserInfoShowDataServlet", //请求的服务器url地址；等价于form表单的 action属性
			data : "", // 发送的数据
			dataType : "json", // 返回给ajax引擎的数据类型[返回的是json对象类型，如果不设置，则默认返回的是字符串类型]
			success : function(data) { // ajax引擎的回调函数，其中data就是服务器respon返回的数据，用于使用获取的数据更新页面
				//console.info("Data Saved: ");
				//console.info(data);
				// 解析json对象数据并进行显示
				// 解析结果字符串
				var strContent = "";
				// 遍历json数组，将数据取出进行显示
				/* jquery的each函数，第一个参数是被遍历的对象；
				   第二个参数是回调函数，也就是在该函数中处理被遍历对象
				   回调函数的两个参数：第一个是json数组的索引；第二个参数是被遍历的元素对象
				 */
				$.each(data, function(index, ev) {
					// 因为服务器端Servlet中查询到的结果集是list+实体类的形式，所有ev就是一个是实体类对象
					strContent += "<tr>";

					strContent += "<th scope='row'>";
					strContent += index + 1;
					strContent += "</th>";

					strContent += "<td>";
					strContent += ev.userName;
					strContent += "</td>";

					strContent += "<td>";
					strContent += ev.userRealName;
					strContent += "</td>";

					strContent += "<td>";
					strContent += ev.userEmail;
					strContent += "</td>";

					strContent += "<td>";
					strContent += ev.userRegisterDate;
					strContent += "</td>";

					strContent += "</tr>";

				});
				// 打印解析的内容结果
				//console.info(strContent);
				// 解析完json数据内容之后，将解析出来的内容写到html对应的标签中
				$('#tbShowData').html(strContent);
			}
		});
	}
</script>
</head>
<body>
	<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>序号</th>
					<th>用户名</th>
					<th>用户真实姓名</th>
					<th>邮箱</th>
					<th>注册日期</th>
				</tr>
			</thead>
			<tbody id="tbShowData">
				
			</tbody>
		</table>
	</div>
</body>
</html>